<template>
    <div>
        <input type="text" v-model="mytext">

        <select v-model="select">
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
        <hr>
        <input type="text" v-model="state.mytext2">
    </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';

export default {
    setup() {
        const mytext = ref("")
        const select = ref("bbb")

        const state = reactive({
            mytext2: ""
        })

        //推荐使用ref方式

        //ref类型写法一
        // watch(mytext, (newValue, oldValue) => {
        //     console.log("mytext监听方式1", newValue, oldValue);
        // })

        //ref类型写法二:getter方式
        // watch(() => mytext.value, (newValue, oldValue) => {
        //     console.log("mytext监听方式2", newValue, oldValue);
        // })

        //ref多个类型写法三：数组方式
        // watch([mytext, select], (newValue, oldValue) => {
        //     console.log("mytext监听方式3", newValue, oldValue);
        // }, { immediate: true }) //immediate页面渲染后立即触发
        //deep:true---深度监听，针对对象

        //reactive类型写法一：这种方式不能监听具体的属性
        // watch(state, () => {
        //     console.log("mytext2监听方式1");
        // })

        //reactive类型写法二：getter方式，可以监听具体的属性
        watch(() => state.mytext2, (newValue, oldValue) => {
            console.log("mytext2监听方式2", newValue, oldValue);
        }, { immediate: true })

        return {
            mytext,
            select,
            state
        }
    },
}
</script>